<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { Api } from '@/assets/apis';
import type { HotWordType, SearchType } from '@/typings'
import { Toast } from 'vant';

const router = useRouter()
const keyword = ref()
const result = ref(false)
const HotWordType = ref<HotWordType>({} as HotWordType)
const SearchType = ref<SearchType>({} as SearchType)

const history = ref(window.localStorage.getItem('historyList') ? JSON.parse(window.localStorage.historyList) : JSON.parse('[]'))
const onSearch = (keyword: string) => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    });
    if (keyword == '') {
        return
    }
    let array = window.localStorage.getItem('historyList') ? JSON.parse(window.localStorage.historyList) : JSON.parse('[]')
    array = [keyword, ...array.filter((h: string) => h !== keyword)]
    history.value = array
    window.localStorage.setItem('historyList', JSON.stringify(array))

    searchRes()

    if (SearchType.value) {
        result.value = true
    }

}

const search = (h: string) => {
    Toast.loading({
        message: '搜索中...',
        forbidClick: true,
        duration: 0,
    });
    keyword.value = h
    searchRes()
    if (SearchType.value) {
        result.value = true
    }
}

const clear = () => {
    window.localStorage.removeItem('historyList')
    window.location.reload();
}

const home = () => {
    router.push('/')
}

onMounted(async () => {
    let { data } = await Api.getHotWords()
    HotWordType.value = data
})

const searchRes = (async () => {
    let { data } = await Api.getSearch(keyword.value)
    SearchType.value = data.data
    console.log(data, 'data');

    console.log(SearchType.value);
    Toast.clear()

})


const read = (id: string, title: string) => {
    router.push(`/book/${id}?title=${title}`)
}

</script>

<template>
    <div class="header">
        <div class="back" @click="home()">
            <van-icon name="arrow-left" />
        </div>
        <div class="input">
            <input type="text" placeholder="唐诗里的烟火人间" v-model="keyword">
            <div class="btn" @click="onSearch(keyword)">
                <img src="../../assets/images/search.png" alt="">
            </div>
        </div>
        <div class="home" @click="home()">
            首页
        </div>
    </div>
    <div class="advice">
        大家都在搜
    </div>
    <div class="advice-content">
        <div class="item" v-for="i in HotWordType.list" @click="onSearch(i.name), search(i.name)">
            {{ i.name }}
        </div>
    </div>
    <div class="advice">
        最近搜索
        <van-icon name="delete-o" class="delete" @click="clear()" />
    </div>
    <div>
        <div class="advice-content">
            <div class="item" v-for="h in history" @click="search(h)">
                {{ h }}
            </div>
        </div>
    </div>
    <div class="res" v-show="result">
        <div class="res-item" v-for="a in SearchType.books" @click="read(a.bookId, a.title)">
            <div class="item-left">
                <img :src="a.cover" alt="">
            </div>
            <div class="item-right">
                <h3>{{ a.title }}</h3>
                <p>{{ a.author }}|{{ a.category }}</p>
                <p class="desc">{{ a.summary }}</p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    width: 100%;
    height: 44rem;
    background-color: #e64d2e;
    display: flex;
    align-items: center;

    .back {
        width: 40rem;
        height: 44rem;
        color: #fff;
        text-align: center;
        line-height: 44rem;
        font-size: 20rem;
    }

    .input {
        width: 272rem;
        height: 28rem;
        position: relative;

        input {
            width: 206rem;
            height: 100%;
            border: none;
            border-radius: 14rem;
            padding: 0 51rem 0 15rem;
        }

        .btn {
            width: 51rem;
            height: 28rem;
            position: absolute;
            right: 0;
            top: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }


    .home {
        width: 48rem;
        height: 28rem;
        color: #fff;
        font-size: 15rem;
        text-align: center;
        line-height: 28rem;
    }
}

.advice {
    width: 345rem;
    height: 38rem;
    padding: 0 15rem;
    background-color: #f5f5f5;
    color: #807a73;
    line-height: 38rem;
    font-size: 14rem;
    position: relative;

    .delete {
        position: absolute;
        right: 15rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

.advice-content {
    width: 345rem;
    padding: 15rem;
    display: flex;
    flex-wrap: wrap;

    .item {
        height: 28rem;
        border: 1rem solid #c8c8c8;
        border-radius: 4rem;
        padding: 0 10rem;
        margin: 0 15rem 15rem 0;
        line-height: 28rem;
        text-align: center;
        color: #aba59a;
    }
}

.res {
    width: 375rem;
    height: calc(100vh - 44rem);
    background-color: #fff;
    position: absolute;
    top: 44rem;

    .res-item {
        width: 345rem;
        height: 108rem;
        padding: 10rem 15rem;
        display: flex;

        .item-left {
            width: 75rem;
            height: 105rem;
            margin-right: 20rem;

            img {
                width: 100%;
            }
        }

        .item-right {
            max-width: 250rem;

            h3 {
                font-size: 16rem;
                color: #6c6358;
                padding-bottom: 6rem;
            }

            p {
                font-size: 12rem;
                color: #aba59a;
                margin-bottom: 5rem;
                line-height: 16rem;
                overflow: hidden;
            }

            .desc {
                overflow: hidden;
                height: 65rem;
            }
        }
    }
}
</style>